<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#fff"
      text-color="#000"
      active-text-color="#0C8C42"
      unique-opened
      router
    >
      <template v-for="item in sidebarList">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
              >
                <template #title>{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                  >{{ threeItem.title }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.index"
                :key="subItem.index"
                >{{ subItem.title }}</el-menu-item
              >
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const route = useRoute()
const store = useStore()

const sidebarList = [
  {
  	icon: 'el-icon-s-home',
  	index: 'dashboard',
  	title: '系统首页',
  },
  {
  	icon: 'el-icon-s-order',
  	index: 'table',
  	title: '基础表格',
  },
  {
    icon: 'el-icon-s-data',
    index: 'datamart',
    title: 'Datamart',
    subs: [
      {
        index: 'plants',
        title: 'plants'
      },
      {
        index: 'animals',
        title: 'animals'
      }
    ]
  },
  {
    icon: 'el-icon-s-order',
    index: 'database',
    title: 'Database',
    subs: [
      {
        index: 'gene',
        title: 'gene'
      },
      {
        index: 'literature',
        title: 'literature'
      }
    ]
  },
  {
  	icon: 'el-icon-document',
  	index: '6',
  	title: '表单相关',
  	subs: [
  		{
  			index: 'form',
  			title: '基本表单',
  		},
  		{
  			index: 'tabledemo',
  			title: '表格组件',
  		},
  		{
  			index: 'upload',
  			title: '文件上传',
  		},
  	],
  },
  {
  	icon: 'el-icon-warning',
  	index: '10',
  	title: '错误处理',
  	subs: [
  		{
  			index: 'permission',
  			title: '权限测试',
  		},
  		{
  			index: '404',
  			title: '404页面',
  		},
  	],
  },
]

let onRoutes = computed(() => route.path.replace('/', ''))
let collapse = computed(() => store.state.collapse)
</script>

<style scoped>
.sidebar {
  overflow-y: scroll;
  border-radius: 5px;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
.el-menu:hover {
  background-color: #fff;
  color: #f0f0f0;
}
</style>
